<template>
  <div class="app-container">
    <el-card style="margin-bottom:20px">
      <div style="text-align:center;color:red">{{groupName}}</div>
    </el-card>
    <el-table :data="porjectList" style="width: 100%">
      <el-table-column prop="proId" label="专利编号" align="center">
      </el-table-column>
      <el-table-column prop="proName" label="专利名称" align="center">
      </el-table-column>
      <el-table-column prop="proAuthor" label="专利作者" align="center">
      </el-table-column>
      <el-table-column prop="proFile" label="专利文件" align="center" width="500px">
        <template slot-scope="scope">
          <a @click="downloadFile(scope.row)" class="fileStyle">{{downName(scope.row.proFile)}}</a>
          <el-progress :percentage="progress1" :format="format" v-if="scope.row.proId==rowid?true:false">
          </el-progress>
        </template>
      </el-table-column>
      <el-table-column prop="proCreatetime" label="日期" :formatter="dateFormat" sortable align="center" width="200px">
      </el-table-column>
      <el-table-column label="操作" width="200px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" disabled
            v-hasPermi="['project:projectData:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { selectProByid } from "@/api/system/project/project"
import moment from "moment";
import download from "@/plugins/download"
export default {
  data () {
    return {
      groupName: '',
      rowid: '',
      progress1: 0,
      porjectList: []
    }
  },
  created () {
    this.getPro()
  },
  computed: {
    progress () {
      return this.$store.state.myProject.progress
    }
  },
  watch: {
    progress (newval, oldval) {
      this.progress1 = newval
    }
  },
  methods: {
    format (percentage) {
      return percentage === 100 ? '完成' : `${percentage}%`;
    },
    downloadFile (data) {
      if (this.progress1 != 0) {
        this.$message({
          message: '已经有一个专利正在下载',
          type: 'warning'
        });
      } else {
        this.rowid = data.proId
        download.resource(data.proFile)
        setTimeout(() => {
          this.rowid = ""
          this.progress1 = 0;
        }, 3000)

      }

    },
    downName (file) {
      let data = file.split("/");
      return data[data.length - 1];
    },
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm");
    },
    getPro () {
      const id = this.$route.query.id
      selectProByid(id).then(res => {
        this.porjectList = res.data
        this.groupName = this.$route.query.groupName
        console.log(this.porjectList)
      })
    },
    // 删除
    handleDelete (val) {
      alert("1")
    }
  }
}
</script>
<style scoped>
.fileStyle {
  padding: 12px;
  color: #442ed0;
}
.fileStyle:hover {
  text-decoration: underline !important;
  cursor: pointer;
  color: #2300ff;
}
</style>